<!DOCTYPE html>
    <!--
    - index.html
    -
    - Display the homepage
    -
    - @author Jena Graham, Emilia Holbik 
    -->

<html>
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
		<title>Sneaker Scrutiny</title>
		<link href="css/style.css" rel="stylesheet" type="text/css" />
	</head>

	<body>
		<div id="wrap">
			<div id="top">
				<div id="title">
					<div id="logo"></div>
					<div id="title">
						<div id="logo"><a href="index.html"><img src="http://s17.postimg.org/vf78nvb23/logov1.png?noCache=1383248945"></a>
						</div>
						<div id="title">
							<h1>Sneaker Scrutiny</h1>
						</div>
					</div>
				</div>
			</div>

			<div id="bottom">
				<div class="side-by-side">
					<div id="contig-us-map-canvas" class="stacked"></div>
					<div id="bottom-left-filter" class="stacked">
						<div class="stacked">
							<p id="drop-down-prompt">
								Select a Counselor
							</p>
							<select id="drop-down">
								<option value=""> Select Counselor </option>
								<option value="AJG"> Alex Gonzalez </option>
								<option value="DBR"> Dan Reilly </option>
								<option value="DJL"> Daniel Lyons </option>
								<option value="ENB"> Emily Bridge </option>
								<option value="MBD"> Matt Deschner </option>
								<option value="MCW"> Martin Williams </option>
								<option value="MTO"> Maria Olivia </option>
								<option value="TJS"> Thomas Stuyvesant </option>
							</select>
						</div>

						<div id="radio-buttons" class="stacked">
							<input type="radio" id="applied-radio" name="admission-status"
							value="Applied" class="side-by-side" checked>
							<label for="applied-radio"> Applied </label>

							<input type="radio" id="accepted-radio" name="admission-status"
							value="Accepted" class="side-by-side">
							<label for="accepted-radio"> Accepted </label>

							<input type="radio" id="confirmed-radio" name="admission-status"
							value="Confirmed" class="side-by-side">
							<label for="confirmed-radio"> Attending </label>
						</div>
						
						<div id="dates-info">
              <p id="dates-text">
                    **Displayed data represents applications from Fall 2011 - Fall 2012**
              </p>
						</div>
					</div>
				</div>

				<div class="side-by-side">
					<div id="right-info-box">
						<div id="right-info-filter">
							<p>
								Sort by:
							</p>
							<input type="radio" id="number-button" name="data-view-type"
							value="number" class="hide-element" checked>
							<label for="number-button" class="button active-button"> Number </label>
							<input type="radio" id="location-button" name="data-view-type"
							value="location" class="hide-element">
							<label for="location-button" class="button"> City, State </label>
						</div>
						<div id="right-info-data">
							<!-- DEBUG
							<div class="data-box-contain">
							<p><span>School Name:</span> Heather Bing Memorial High</p>
							<p><span>Number of Apps:</span>3</p>
							<p><span>Location:</span>WA, Summer</p>
							</div>
							-->
						</div>
					</div>
				</div>
			</div>
		</div>

		<!--
		The following script tag utilizes RequireJS to perform AMD loading of
		the JavaScript files listed in main.js

		The data-main attribute tells RequireJS which file will be used to
		bootstrap our environment. In this case it will look for main.js
		in the js/ directory (the path is relative to the site root).
		-->
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
		<script data-main='js/libs/main' src='js/libs/require.js'></script>
		<!-- JavaScript at the bottom for fast page loading -->

	</body>
</html>
